<template>
    <div class="art-box">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>
                <strong>我的星球</strong>
            </el-breadcrumb-item>
            <el-breadcrumb-item>文章管理</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="art-main">
            <el-result
                v-if="artList.length <= 0"
                icon="warning"
                title="抱歉,您还没发布过任何东西，赶紧去发表属于您的专题吧~ ~ ~"
                sub-title="波仔星球欢迎您探讨"
            >
                <template #extra>
                    <el-button type="primary" @click="()=>{router.push('/')}">返回首页</el-button>
                </template>
            </el-result>
            <el-row :gutter="24">
                <el-col :span="11" v-for="(item,index) in artList" :key="index" :style="item.articleState==1?color='red':color='black'">
                    <el-card shadow="hover">
                        {{index+1}}、 
                        <span>标题:<strong>{{item.articleTitle}}</strong></span>
                        <span>类型:<strong>{{item.articleTypeName}}</strong></span>
                        <span>发布时间:<strong>{{item.planetUpdateTime}}</strong></span>
                        <span>状态:
                            <el-switch
                                disabled
                                v-model="item.articleState"
                                :active-value="0"
                                :inactive-value="1"
                                class="ml-2"
                                inline-prompt
                                style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                                active-text="正常"
                                inactive-text="异常"
                            />
                        </span>
                        <el-button v-if="item.articleState==1" type="warning" @click="getArtErrorDetail">查看异常详情</el-button>
                        
                    </el-card>
                </el-col>
            </el-row>    
        </div>
        <div class="page">
            <el-pagination
                v-model:current-page="pageDto.page"
                v-model:page-size="pageDto.size"
                :page-sizes="[10, 20, 30]"
                background
                layout="total, sizes, prev, pager, next, jumper"
                :total="totals"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            />
        </div>
    </div>
</template>

<script setup>
import { $http } from "@/utils/axios";
import { onMounted, reactive, ref } from "vue";
import { gatewayPrefix, userMiddleContextPath} from '@/utils/commConstance';
import router from "@/router";
import { ElNotification } from 'element-plus'
onMounted(()=>{
    getCurrentUserArtList()
})
const totals = ref(0)
const pageDto = reactive({
    "searchContent": '',
    "page": 1,
    "size": 20
})
const handleSizeChange = (size)=>{
    pageDto.size = size
    getCurrentUserArtList()
}
const handleCurrentChange = (page)=>{
    pageDto.page = page
    getCurrentUserArtList()
}
const artList = ref([])
// 获取我的文章
const getCurrentUserArtList = ()=>{
    $http.post(`${gatewayPrefix}/${userMiddleContextPath}/userOperation/getUserArtList`,pageDto).then(res=>{
        totals.value=Number(res.totals)
        artList.value=res.voList
    })
}
// 查看异常详情
const getArtErrorDetail = ()=>{
    ElNotification({
        title: 'Error',
        message: '异常详情-待定',
        type: 'error',
    })
}
</script>

<style src='../../assets/css/myArtList.css' scoped>

</style>